<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            text-align: center;
        }
        #ring-progress {
            display: block;
            width: 150px;
            height: 150px;
            margin: 0 auto;
        }
        #load-chart {
            width: 400px;
            height: 150px;
        }
        #pie, #ring {
            width: 400px;
            height: 200px;
        }
        #line {
            width: 400px;
            height: 200px;
        }
        #bar {
            width: 400px;
            height: 200px;
        }
        canvas,
        #separate-stack-bar,
        #k-avg,
        #stack-bar {
            width: 400px;
            height: 200px;
        }
    </style>
</head>
<body>
    <h3>ring-progress</h3>
    <canvas id="ring-progress"></canvas>
    <button id="test-btn">update</button>

    <h3>load chart</h3>
    <canvas id="load-chart"></canvas>

    <h3>pie chart</h3>
    <canvas id="pie"></canvas>

    <h3>ring chart</h3>
    <canvas id="ring"></canvas>

    <h3>line</h3>
    <canvas id="line"></canvas>
    <button id="line-btn">redraw</button>
    <h3>bar</h3>
    <canvas id="bar"></canvas>

    <h3>stack bar</h3>
    <canvas id="stack-bar"></canvas>

    <h3>separate stack bar</h3>
    <canvas id="separate-stack-bar"></canvas>

    <h3>k-avg</h3>
    <canvas id="k-avg"></canvas>
    
    <h3>bar 2</h3>
    <canvas id="bar-2"></canvas>
</body>
</html>